<template>
  <div style="z-index: 2">
    <el-container>

      <!-- 侧边栏 -->
      <el-aside style="min-height: 100vh; background-color: #001529; transition: width 0.5s; color: white;
      box-shadow: 8px 0 8px rgba(0, 21, 41, 0.35);"
                :width="isCollapse ? '64px' : '200px'">

        <!-- 侧边栏头 -->
        <div style="display: flex; align-items: center; justify-content: center;height: 70px; font-size: 23px;">
          <img src="@/assets/logo.png" alt="" style="width: 40px; margin-right: 8px">
          <transition name="el-zoom-in-center">
            <span v-show="!isCollapse">驾校管理系统</span>
          </transition>
        </div>

        <!-- 侧边栏菜单 -->
        <el-menu style="border: none; background-color: #001529; overflow-x: hidden; overflow-y: hidden;"
                 router
                 text-color="rgba(255,255,255,0.65)"
                 active-text-color="#fff"
                 :default-active="$route.path"
                 :collapse="isCollapse" collapse-transition="false">

          <!-- 系统首页栏 -->
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <!-- 学员栏 -->
          <el-menu-item index="/course_reserve" v-if="user.role === '学员'">
            <i class="el-icon-c-scale-to-original"></i>
            <span slot="title">课程预约</span>
          </el-menu-item>
          <el-menu-item index="/car_reserve" v-if="user.role === '学员'">
            <i class="el-icon-truck"></i>
            <span slot="title">车辆预约</span>
          </el-menu-item>
          <!-- 学员信息栏 -->
          <el-submenu index="1" v-if="user.role === '学员'">
            <template slot="title">
              <i class="el-icon-menu" :class="active3i"></i>
              <span :class="active3s">信息管理</span>
            </template>

            <el-menu-item index="/course_record">
              <i class="el-icon-c-scale-to-original"></i>
              <span slot="title">课程预约记录</span>
            </el-menu-item>
            <el-menu-item index="/car_record">
              <i class="el-icon-truck"></i>
              <span slot="title">车辆预约记录</span>
            </el-menu-item>
            <el-menu-item index="/comment">
              <i class="el-icon-document"></i>
              <span slot="title">用户评价</span>
            </el-menu-item>
            <el-menu-item index="/message">
              <i class="el-icon-bell"></i>
              <span slot="title">消息通知</span>
            </el-menu-item>
          </el-submenu>

          <!-- 管理员、教练栏 -->
          <el-menu-item index="/chart" v-if="user.role === '管理员'|| user.role === '教练'">
            <i class="el-icon-s-data"></i>
            <span slot="title">统计图表</span>
          </el-menu-item>
          <!-- 信息管理栏 -->
          <el-submenu index="1" v-if="user.role === '管理员'|| user.role === '教练'">
            <template slot="title">
              <i class="el-icon-menu" :class="active1i"></i>
              <span :class="active1s">信息管理</span>
            </template>
            <el-menu-item index="/course_info">
              <i class="el-icon-c-scale-to-original"></i>
              <span slot="title">课程信息</span>
            </el-menu-item>
            <el-menu-item index="/course_check">
              <i class="el-icon-circle-check"></i>
              <span slot="title">课程预约审核</span>
            </el-menu-item>
            <el-menu-item index="/car_info">
              <i class="el-icon-truck"></i>
              <span slot="title">车辆信息</span>
            </el-menu-item>
            <el-menu-item index="/car_check">
              <i class="el-icon-circle-check"></i>
              <span slot="title">车辆预约审核</span>
            </el-menu-item>
            <el-menu-item index="/notice">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">公告信息</span>
            </el-menu-item>
            <el-menu-item index="/comment_info">
              <i class="el-icon-document"></i>
              <span slot="title">评价信息</span>
            </el-menu-item>
          </el-submenu>

          <!-- 管理员栏 -->
          <el-submenu index="2"
                      v-if="user.role === '管理员'">
            <template slot="title">
              <i class="el-icon-user-solid" :class="active2i"></i>
              <span :class="active2s">用户管理</span>
            </template>
            <el-menu-item index="/manager_info">
              <i class="el-icon-user"></i>
              <span slot="title">管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/coach_info">
              <i class="el-icon-user"></i>
              <span slot="title">教练信息</span>
            </el-menu-item>
            <el-menu-item index="/student_info">
              <i class="el-icon-user"></i>
              <span slot="title">学员信息</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>

        <!-- 页面头部 -->
        <el-header style="display: flex; align-items: center; padding-left: 10px;
        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);">

          <!-- 侧边栏收缩按钮 -->
          <i :class="collapseIcon" @click="handleCollapse"></i>

          <!-- 面包屑 -->
          <el-breadcrumb style="margin-left: 20px;"
                         separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/'}">主页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path}">{{$route.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 用户栏 -->
          <div style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">

            <!-- 全屏按钮 -->
            <i style="font-size: 30px; margin-right: 5px; cursor: pointer;"
               class="el-icon-full-screen"
               @click="handFull"
               :hover="{ color: 'red',}"></i>

            <!-- 用户显示 -->
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: pointer;">
                <img :src="user.avatar || require('@/assets/dft_avatar.png')" alt=""
                     style="width: 40px; height: 40px; margin: 0 5px; border-radius: 50%">
                <span>{{user.name}}</span>
              </div>

              <!-- 用户权限下拉菜单 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 页面内容 -->
        <el-main style="padding: 0">
          <router-view @update:user="updateUser" />
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  name: 'HomeView',

  data() {
    return {
      isCollapse: false, // 控制侧边栏是否折叠
      collapseIcon:'el-icon-s-fold', // 控制侧边栏折叠按钮的图标
      // 定义一些用于控制菜单高亮的变量
      active1i: '', active1s: '', active2i: '', active2s: '', active3i: '', active3s: '',
      // 定义不同角色可访问的路由数组
      info_route: ['/course_info', '/course_check', '/car_info', '/car_check', '/notice','/comment_info'], // 信息管理相关路由
      info_route_student: ['/course_record', '/car_record', '/comment','/message'], // 学生信息管理相关路由
      user_route: ['/manager_info', '/coach_info', '/student_info'], // 用户管理相关路由
      currentRoute: '', // 当前路由路径

      user: JSON.parse(localStorage.getItem('honey-user') || '{}'), // 从本地存储获取用户信息
    }
  },

  mounted() {
    this.active(); // 初始化菜单高亮状态
    this.$watch('$route', this.active); // 监听路由变化，更新菜单高亮状态
  },

  methods: {
    // 根据当前路由设置对应菜单的高亮状态
    active() {
      this.currentRoute = this.$route.path;
      // 根据当前路由判断并设置一级菜单高亮
      if (this.info_route.includes(this.currentRoute)) {
        this.active1i = 'active-submenu-i'; this.active1s = 'active-submenu-s';
      } else {
        this.active1i = ''; this.active1s = '';
      }
      // 根据当前路由判断并设置二级菜单高亮（管理员相关）
      if (this.user_route.includes(this.currentRoute)) {
        this.active2i = 'active-submenu-i'; this.active2s = 'active-submenu-s';
      } else {
        this.active2i = ''; this.active2s = '';
      }
      // 根据当前路由判断并设置二级菜单高亮（学员相关）
      if (this.info_route_student.includes(this.currentRoute)) {
        this.active3i = 'active-submenu-i'; this.active3s = 'active-submenu-s';
      } else {
        this.active3i = ''; this.active3s = '';
      }
    },

    // 控制侧边栏的折叠与展开
    handleCollapse() {
      this.isCollapse = ! this.isCollapse;
      // 根据折叠状态切换按钮图标
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },

    // 全屏切换方法
    handFull() {
      // 检查当前是否处于全屏模式
      const isFullScreen = document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement;

      if (isFullScreen) {
        // 如果当前是全屏模式，则退出全屏
        if (document.exitFullscreen) {document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {document.msExitFullscreen();}
      } else {
        // 如果当前不是全屏模式，则进入全屏
        const elem = document.documentElement;
        if (elem.requestFullscreen) {elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}
      }
    },

    // 登出方法
    logout() {
      localStorage.removeItem('honey-user') // 登出时清除本地存储的用户信息
      this.$router.push({
        path: "/login",
        query: {
          keywords: this.input,
          type: this.type,
          date:new Date().getTime()
        }
      })
    },

    // 更新用户信息的方法，接收子组件传递的数据
    updateUser(user) {
      this.user = JSON.parse(JSON.stringify(user))  // 深拷贝用户数据，避免引用关系导致数据混乱
    },

  }
}
</script>


<style>
/* 一级菜单 */
.el-menu-item,
.el-submenu__title {
  height: 45px;
  line-height: 45px;
}

/* 二级菜单 */
.el-menu--inline .el-menu-item {
  height: 40px;
  line-height: 40px;
}
.el-menu--inline,
.el-menu--inline .el-menu-item {
  background-color: #000c17;
}
.el-menu--popup{
  background-color: #000c17;
  border-radius: 10px;
}

/* 所有菜单栏悬停时 */
.el-menu-item:hover,
.el-menu-item:hover i,
.el-submenu__title:hover,
.el-submenu__title:hover i {
  transition: color 0.3s, transform 0.3s;
  color: #fff !important;
  background-color: initial;
  transform: scale(1.1);
}

/* 当前页面对应的菜单栏高亮 */
.el-menu-item.is-active {
  background-color: #1890ff;
  border-radius: 10px;
  margin: 9px;
}
.el-menu-item.is-active i,
.el-menu-item.is-active .el-tooltip {
  margin-left: -8px;
}

/* 在二级菜单时，所属一级菜单高亮 */
.active-submenu-i {
  color: #fff !important;
}
.active-submenu-s {
  color: #fff;
}

/* 折叠按钮图标 */
.el-icon-s-fold,
.el-icon-s-unfold {
  font-size: 30px;
  cursor: pointer;
}
.el-icon-s-fold:hover,
.el-icon-s-unfold:hover {
  color: #1890ff;
  transform: scale(1.1);
  transition: color 0.3s, transform 0.3s;
}

/* 用户头像图片 */
.user-head-img:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}

/* 全屏按钮 */
.el-icon-full-screen:hover {
  color: #1890ff;
  transform: scale(1.1);
  transition: color 0.3s, transform 0.3s;
}
</style>